<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待办任务列表</title>
    <!-- 其他 style 标签内容 -->
</head>

<body>
    <div id="app">
        <h1 class="title">我的待办任务</h1>
        <div class="content">
            <p>
                <span class="all-count">任务总数：{{total}} 个</span>
                <span class="unfinish-count">未完成：{{unfinished}} 个</span>
            </p>
            <p>
                <input class="task-input" placeholder="请输入新待办任务" type="text" v-model="newTask" />
                <button class="btn" @click="addTask">添加任务</button>
                <button class="btn" @click="clearDoneTasks">清除已完成</button>
            </p>
            <p>
            <h3>任务列表</h3>
            </p>
            <ul class="task-list">
                <!-- 任务列表项 -->
            </ul>
        </div>
    </div>

    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                newTask: "",  // 用户输入的新任务
                tasks: []  // 存储任务列表
            },
            methods: {
                addTask: function () {
                    if (this.newTask.trim() !== "") {
                        this.tasks.push({ content: this.newTask, done: false });
                        this.newTask = "";  // 清空输入框
                        this.updateCounts();
                    }
                },
                toggleTaskDone: function (task) {
                    task.done = !task.done;
                    this.updateCounts();
                },
                clearDoneTasks: function () {
                    this.tasks = this.tasks.filter(task => !task.done);
                    this.updateCounts();
                },
                updateCounts: function () {
                    const total = this.tasks.length;
                    const unfinished = this.tasks.filter(task => !task.done).length;
                    document.querySelector('.all-count').textContent = `任务总数：${total} 个`;
                    document.querySelector('.unfinish-count').textContent = `未完成：${unfinished} 个`;
                }
            },
            computed: {
                filteredTasks: function () {
                    return this.tasks.map((task, index) => {
                        return {
                            ...task,
                            index: index
                        };
                    });
                }
            }
        });

        // 动态生成任务列表
        const vm = new Vue({ el: "#app" });
        vm.$nextTick(() => {
            const taskList = document.querySelector('.task-list');
            vm.filteredTasks.forEach((task, index) => {
                const listItem = document.createElement('li');
                listItem.className = task.done ? 'done' : 'normal';
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.className = 'ckbox';
                checkbox.onclick = () => vm.toggleTaskDone(vm.tasks[task.index]);
                const span = document.createElement('span');
                span.textContent = task.content;
                listItem.appendChild(checkbox);
                listItem.appendChild(span);
                taskList.appendChild(listItem);
            });
        });
    </script>
</body>

</html>